<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 第一种形式使用对象 -->
        <p :class="{on:isflag,'on1':true}">动态class 值为对象形式</p>
        <!-- 第二种: 三目使用 -->
        <p :class="isflag?'on':''">三目运算符</p>
        <!-- 第三种: 数组形式 -->
        <p :class="['on2','on3',actived]">类名中使用数组</p>
        <!-- 第四种:数组中使用三目 -->
        <p :class="['on2',isflag?'on3':'']">数组中包含三目</p>
        <!-- 第五种: 对象中简化三目 -->
        <p :class="['on2',{on3:isflag}]">数组中使用对象简化三目</p>
        <!-- 第六种: 设置style 样式 -->
        <p :style="{fontSize:'50px',background:'red'}">设置style 样式</p>
        <button @click="isflag=!isflag">修改 isfag</button>
    </div>
</body>

</html>
<script>
    // vue中使用的动态class 设置样式

    const app = Vue.createApp({
        data() {
            return {
                isflag: true,
                actived: 'active'
            }
        },
        methods: {

        }
    }).mount('#app')

</script>